<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="icon" href="images/favicon.png">
</head>

<body>
    <header>
        <a href="index.html"><img src="images/logo.png" alt=""></a>
        <nav>
            <a href="">HOME</a>
            <a href="">ABOUT</a>
            <a href="">GALLERY</a>
            <a href="">FACULTY</a>
            <a href="">EVENTS</a>
            <a href="">CONTACT</a>
        </nav>
    </header>
    <section class="banner">
        <img src="images/banner3.jpg" alt="">
        <div>
            <input type="text" placeholder=" you Name">
            <input type="text" placeholder=" you Phone">
            <input type="email" placeholder=" you Email">
            <textarea></textarea>
            <button type="button">Click Me</button>
        </div>
    </section>
    <section class="about">
        <article class="top">
            <div class="title">
                <h1>ABOUT</h1>
                <hr />
                <p>If you explore an idea or suggestion, you think about it or comment on it in detail, in order to
                    assess it carefully.If people explore an area for a substance such as oil or minerals,
                </p>
            </div>

            <div class="content">
                <h2>A WORD ABOUT US</h2>
                <div class="first">
                    <p>If you explore an idea or suggestion, you think about it or comment on it in detail, in order to
                        assess it carefully.If people explore an area for a substance such as oil or minerals,</p>
                    <button>EXPLORE</button>
                </div>
                <img src="images/bb3.jpg" alt="">
                <div class="second">
                    <h3>70000</h3>
                    <hr />
                    <h4>Student</h4>
                </div>
                <div class="third">
                    <h3>600</h3>
                    <hr />
                    <h4>Faculty</h4>
                </div>
            </div>
        </article>

        <article class="bottom">
            <ul>
                <li><img src="images/b1.jpg"></li>
                <li class="article">
                    <h3>Library</h3>
                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
                    <p class="more">Lorem Ipsum has been the industry's standard dummy text ever since the 1500% when an
                        unkown
                        printer took
                        a galley of type and scrambled it to make a type specimen book.
                    </p>
                    <button>EXPLORE</button>
                </li>
                <li><img src="images/b2.jpg"></li>
                <li class="article">
                    <h3>Library</h3>
                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
                    <p class="more">Lorem Ipsum has been the industry's standard dummy text ever since the 1500% when an
                        unkown
                        printer took
                        a galley of type and scrambled it to make a type specimen book.
                    </p>
                    <button>EXPLORE</button>
                </li>
                <li class="article">
                    <h3>Library</h3>
                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
                    <p class="more">Lorem Ipsum has been the industry's standard dummy text ever since the 1500% when an
                        unkown
                        printer took
                        a galley of type and scrambled it to make a type specimen book.
                    </p>
                    <button>EXPLORE</button>
                </li>
                <li><img src="images/b3.jpg"></li>
                <li class="article">
                    <h3>Library</h3>
                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
                    <p class="more">Lorem Ipsum has been the industry's standard dummy text ever since the 1500% when an
                        unkown
                        printer took
                        a galley of type and scrambled it to make a type specimen book.
                    </p>
                    <button>EXPLORE</button>
                </li>
                <li><img src="images/b4.jpg"></li>
            </ul>
        </article>
    </section>
    <!-- gallery区 -->
    <section class="gallery clearfix">
        <h1>GALLERY</h1>
        <hr />
        <p>If you explore an idea or suggestion, you think about it or comment on it in detail, in order to
            assess it carefully.If people explore an area for a substance such as oil or minerals,
        </p>
        <ul>
            <li><img src="images/03-01.jpg" alt="">
                <h6>SCIENCE LAB</h6>
            </li>
            <li><img src="images/03-02.jpg" alt="">
                <h6>INDOOR STADIUM</h6>
            </li>
            <li><img src="images/03-03.jpg" alt="">
                <h6>TARNSPORTATION</h6>
            </li>
            <li><img src="images/03-04.jpg" alt="">
                <h6>KIDS ROOM</h6>
            </li>
            <li><img src="images/03-05.jpg" alt="">
                <h6>MEDITATION CLASSES</h6>
            </li>
            <li><img src="images/03-06.jpg" alt="">
                <h6>KIDS PLAY GROUND</h6>
            </li>
        </ul>
    </section>
    <footer>
        © 2016 imooc.com 京ICP备13046642号
    </footer>
</body>

</html>